Table of Content

• Why learn CSS Variables
• Your first variable
• Overiding variables
• Local variables
• Theming
• Changing variables with JavaScript
• Responsiveness and variables
• Two inheritance example
• Credits

Why learn CSS Variables

• We can declare a variable once and apply it to multiple places.
• The old way:

• The new way:

• Advantages over LESS and SASS:

Your first variable

• Defining variables in the :root element (ie the tag element) enables us to access the variable from any of its descendents

/* css */

/* defining css variable on root element ie <html> tag (a pseudoclass) */
:root {
    --red: #ff6f69;
    --beige: #ffeead;
}

html, body {
    background: var(--beige); /* referencing the var */
    color: var(--red);
}

h1, p {
    color: var(--red); 
}

Overiding variables

• Example of how to override variables set in root element.
• Here, all of the descendents of .item class element inherit the new variable.

Local variables

• Here, we do almost the same as previous example where we override variables, but the difference is: we are creating new variable in local scope. And this variable only exist in the scope it is defined in and its descendents.

Theming

• Below is a more useful example on how we could utilize local variables to apply theming.
• Here, we make a featured item stand out, the new variable value only applies to the local scope within the class (and its descendents).

  

Changing variables with JavaScript

• We can change any css variables with Javascript.
• To query the element we defined the variable in, use document.querySelector( css_elem ). Where css_elem is the css selector we want to target.
• To get the variables we defined under that element, use getComputedStyle( elem ). Where elem is the selected element we get from querySelector.
• To get the value of a specific variable, use elemStyle.getPropertyValues( css_var ). Where elemStyle is the saved style returned from getComputedStyle() and css_var is the name of the css variable we want to extract.
• To change a specific css variable, use elem.style.setProperty( css_var, new_value ). Where css_var is the css variable we want to change, and new_value is the new value we want to change it to.

Responsiveness and variables

• We can override css variables in media query to take effect only for certain device width for example.
• Here, we are changing the layout of the grid columns from 2 columns, defined in line 9 --columns: 200px 200px to 1 column in 50 --columns: 200px. We also changed the value of the --beige variable.

Two inheritance example

1. When we refer a css variable to css another variable, we are copying the value directly.

1. When we override css variable, we need to set it again to override root inheritance.

Credits

• The course: https://v1.scrimba.com/learn/cssvariables